import React from 'react';

export default function Main({
  list,
  handleDelById,
  handleUpdateById,
  handleCheckAll,
}) {
  const isAll = list.length ? list.every((item) => item.isDone) : false;

  return (
    <section className="main">
      <input
        checked={isAll}
        onChange={(e) => handleCheckAll(e.target.checked)}
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
      />
      <label htmlFor="toggle-all">全选</label>
      <ul className="todo-list">
        {list.map((item) => {
          return (
            <li className={item.isDone ? 'completed' : ''} key={item.id}>
              <div className="view">
                <input
                  className="toggle"
                  type="checkbox"
                  checked={item.isDone}
                  onChange={() => handleUpdateById(item.id)}
                />
                <label>{item.task}</label>
                <button
                  onClick={() => handleDelById(item.id)}
                  className="destroy"
                ></button>
              </div>
            </li>
          );
        })}
      </ul>
    </section>
  );
}
